import { Button } from 'antd';
import type React from 'react';
import {
  attachMovable,
  detachMovable,
  getMovable,
} from '@/components/MapView/Mapless/mana/movable';
import styles from '../../index.module.less';
import type { TestControlProps } from '../types';

const Index: React.FC<TestControlProps> = ({ maplessRef }) => {
  const onUseMovables = () => {
    const mMan = attachMovable(maplessRef.current, 'mm1');
    mMan?.on('movablesSelected', () => {});
  };

  const onDrawMovables = () => {
    const mMan = getMovable(maplessRef.current, 'mm1');
    mMan?.drawMovables([
      {
        id: '1',
        name: '移动对象1',
        longitude: 113.267,
        latitude: 23.132,
        icon: 'dzCar',
        azimuth: 45, // 45度方向
      },
      {
        id: '2',
        name: '移动对象2',
        longitude: 113.273,
        latitude: 23.135,
        icon: 'dzCar',
        azimuth: 90, // 90度方向
        state: 'busy',
      },
      {
        id: '3',
        name: '移动对象3',
        longitude: 113.283,
        latitude: 23.135,
        // icon: 'test1',
        icon: 'dzFlight',
        azimuth: 90, // 90度方向
      },
      {
        id: '4',
        name: '移动对象4',
        longitude: 113.283,
        latitude: 23.145,
        // icon: 'test2',
        icon: 'dzShip',
        azimuth: 90, // 90度方向
      },
    ]);
  };

  const onUpdateMovables = () => {
    const mMan = getMovable(maplessRef.current, 'mm1');
    mMan?.updateMovables([
      {
        id: '1',
        azimuth: Math.random() * 360, // 随机旋转角度
      },
      {
        id: '2',
        azimuth: Math.random() * 360, // 随机旋转角度
      },
    ]);
  };

  const onClearMovables = () => {
    const mMan = getMovable(maplessRef.current, 'mm1');
    mMan?.clearMovables();
  };

  const onUnattachMovables = () => {
    detachMovable(maplessRef.current, 'mm1');
  };

  const onSelect2 = () => {
    const mMan = getMovable(maplessRef.current, 'mm1');
    mMan?.setSelected('2', true);
  };

  return (
    <div className={styles.test}>
      <Button type="primary" onClick={onUseMovables}>
        初始化移动对象
      </Button>
      <Button type="primary" onClick={onDrawMovables}>
        绘制移动对象
      </Button>
      <Button type="primary" onClick={onSelect2}>
        选中第二个（测试局部更新）
      </Button>
      <Button type="primary" onClick={onUpdateMovables}>
        更新旋转角度
      </Button>
      <Button type="primary" onClick={onClearMovables}>
        清除移动对象
      </Button>
      <Button type="primary" onClick={onUnattachMovables}>
        销毁移动对象
      </Button>
    </div>
  );
};

export default Index;
